<template>
  <!-- 可拆两组件 -->
  <div class="consult-container">

  <!--  预点单功能 -->
  <div class="consult-tabs">
      <div v-for="(item, index) in consultList" :key="index"  @click="onChangeTab(item.title)" :class="{ 'consult-tab': true, active: consultActive == item.title }" >
        {{ item.title }}
      </div>
  </div> 
  
  <div class="table-main" v-show="consultActive === '消费订单'">
  <el-form class="search-form" label-width="auto" :model="searchForm">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-form-item label="台单号:">
          <el-input v-model="searchForm.consumeCode" placeholder="台单号/订单号/结账单" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="选择时间:">
          <el-date-picker popper-class="date-style" v-model="searchForm.operDate" type="daterange" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="2">
            <div class="time-radio">
              <div>
                <el-radio v-model="timeType" label="0">营业日</el-radio>
              </div>
              <div >
                <el-radio v-model="timeType" label="1">自然日</el-radio>
              </div>
            </div>
       </el-col>
      <el-col :span="4">
        <el-form-item label="选择区域:">
          <el-select v-model="searchForm.roomAreaCode" filterable clearable>
            <el-option v-for="item in area_options" :key="item.roomAreaCode" :value="item.roomAreaCode"
              :label="item.roomAreaName" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="选择桌台:">
          <el-input v-model="searchForm.roomName" placeholder="请选择桌台号" readonly @click="showTables"
            clearable />
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="桌台状态:">
          <el-select v-model="searchForm.roomState" filterable clearable>
            <el-option v-for="item in tableType_options" :key="item.code" :value="item.code" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="订台人:">
          <el-select v-model="searchForm.maintainUserCode" filterable clearable>
            <el-option v-for="item in waiter_options" :key="item.userCode" :value="item.userCode"
              :label="item.userName" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="支付方式:">
          <el-select v-model="searchForm.payType" filterable clearable>
            <el-option v-for="item in payType_options" :key="item.payCode" :value="item.payCode" :label="item.payName" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="客户电话:">
          <el-input v-model="searchForm.memberMobile" placeholder="请输入客户电话" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <div>
          <!-- <el-checkbox v-model="searchForm.checked">兑换券订单</el-checkbox> -->
        </div>
      </el-col>
      <el-col class="action-btn-box" :span="6">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="primary" @click="handlePay">网上支付查询</el-button>
        <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
      </el-col>
    </el-row>
  </el-form>
  <div class="table-box">
    <div class="total-box">
      <div>订单总额：<span class="color-FF6A00">{{ formatDecimal(headData.totalAmt) }}</span></div>
      <div>收款总额：<span class="color-FF6A00">{{ formatDecimal(headData.payAmt) }}</span></div>
      <div>实收金额：<span class="color-FF6A00">{{ formatDecimal(headData.realAmt) }}</span></div>
      <div>找零：<span class="color-FF6A00">{{ formatDecimal(headData.giveChange) }}</span></div>
      <div>优惠总额：<span class="color-FF6A00">{{ formatDecimal(headData.discountAmt) }}</span></div>
      <div>其它金额：<span class="color-FF6A00">{{ formatDecimal(headData.otherAmt) }}</span></div>
      <div>未付总额：<span class="color-FF6A00">{{ formatDecimal(headData.totalAmt - headData.payAmt - headData.discountAmt)}}</span></div>
    </div>
    <el-table :data="tableData" stripe v-loading="loading">
      <el-table-column prop="consumeCode" label="台单号" min-width="210px" />
      <el-table-column prop="roomAreaName" label="区域" min-width="110px" />
      <el-table-column prop="roomName" label="桌台" min-width="110px" />
      <el-table-column prop="startTime" label="开台时间" :min-width="tableColumnaction" />
      <el-table-column prop="arrivedPeoperCount" label="用餐人数" min-width="110px" />
      <el-table-column prop="waiterUser" label="服务员" :min-width="tableColumnaction" />
      <el-table-column prop="totalAmt" label="订单总金额" min-width="130px" />
      <el-table-column prop="discountAmt" label="优惠总金额" min-width="130px" />
      <el-table-column prop="otherAmt" label="其它金额" min-width="130px" />
      <el-table-column prop="realAmt" label="实收金额" min-width="130px">
        <template #default="scope">
          <span class="color-FF6A00">{{ scope.row.realAmt }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="actualAmt" label="现金收款" min-width="130px" />
      <el-table-column prop="giveChange" label="找零" min-width="130px" />
      <el-table-column prop="payType" label="支付方式" min-width="210px" />
      <el-table-column prop="maintainUser" label="订台人" min-width="110px" />
      <el-table-column prop="roomState" label="订单状态" min-width="110px" />
      <el-table-column prop="memberMobile" label="客户电话" min-width="170px" />
      <el-table-column prop="" label="操作" min-width="240px" fixed="right">
        <template #default="scope">
          <el-button class="action-btn" @click="handleDetail(scope.row)"> 查看明细</el-button>
          <el-button v-if="scope.row.roomState == '已清台'" class="action-btn" @click="handleRe(scope.row)"> 复台</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</div>

<!-- 预点单列表 -->
<div class="book-main" v-show="consultActive === '预点订单'"> 
<el-form class="search-form" label-width="auto" :model="searchFormPre">
    <el-row :gutter="20">
      <el-col :span="5">
        <el-form-item label="预订单号:">
          <el-input v-model="searchFormPre.rserveCode" placeholder="请输入预定单号" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="选择时间:">
          <el-date-picker v-model="searchFormPre.operDate" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="3">
            <div class="time-radio">
              <div>
                <el-radio v-model="timeType" label="0">营业日</el-radio>
              </div>
              <div >
                <el-radio v-model="timeType" label="1">自然日</el-radio>
              </div>
            </div>
       </el-col>
      <el-col :span="6">
        <el-form-item label="选择区域:">
          <el-select v-model="searchFormPre.roomAreaCode" filterable clearable>
            <el-option v-for="item in area_options" :key="item.roomAreaCode" :value="item.roomAreaCode" :label="item.roomAreaName" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="选择桌台:">
          <el-input v-model="searchFormPre.roomName" placeholder="请选择桌台号" readonly @click="showTables" clearable />
        </el-form-item>
      </el-col>   
      <el-col :span="5">
        <el-form-item label="支付方式:">
          <el-select v-model="searchFormPre.payType" filterable clearable>
            <el-option v-for="item in payType_options" :key="item.payCode" :value="item.payCode" :label="item.payName" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="客户电话:">
          <el-input v-model="searchFormPre.memberMobile" placeholder="请输入客户电话" clearable />
        </el-form-item>
      </el-col> 
      <el-col :span="6">
        <el-form-item label="单号:">
          <el-input v-model="searchFormPre.consumeCode" placeholder="台单号/订单号/结账单号" clearable />
        </el-form-item>
      </el-col>
      <el-col class="action-btn-box" :span="2"></el-col>
      <el-col class="action-btn-box" :span="6">
        <el-button type="primary" @click="handleSearchPre">查询</el-button>
        <el-button type="primary" @click="handlePay">网上支付查询</el-button>
        <el-button class="reset-btn" @click="handleResetPre">清空筛选 </el-button>
      </el-col>
    </el-row>
  </el-form>
  <div class="table-box">
    <div class="total-box">
      <div>订单总金额：<span class="color-FF6A00">{{ formatDecimal(headData.totalAmt) }}</span></div>
      <div>收款总额：<span class="color-FF6A00">{{ formatDecimal(headData.payAmt) }}</span></div>
      <div>实收金额：<span class="color-FF6A00">{{ formatDecimal(headData.realAmt) }}</span></div>
      <div>优惠总金额：<span class="color-FF6A00">{{ formatDecimal(headData.discountAmt) }}</span></div>
      <div>其他金额：<span class="color-FF6A00">{{ formatDecimal(headData.otherAmt) }}</span></div>
    </div>
    <el-table :data="tableData" stripe v-loading="loading"> 
      <el-table-column prop="consumeCode" label="预点单单号" min-width="210px" />
      <el-table-column prop="roomAreaName" label="区域" min-width="110px" />
      <el-table-column prop="roomName" label="桌台" min-width="110px" />
      <el-table-column prop="consumeTime" label="到店时间" min-width="230px">
        <template #default="scope">
          <span>{{ dayjs(scope.row.consumeTime).format('YYYY-MM-DD HH:mm:ss') }}</span>  
        </template>
      </el-table-column>
      <el-table-column prop="arrivedPeoperCount" label="用餐人数" min-width="110px" />
      <!-- 暂无服务员参数 -->
      <el-table-column prop="" label="服务员" min-width="110px" />
      <el-table-column prop="totalAmt" label="订单总金额" min-width="130px" />
      <!-- 暂以下2参数 -->
      <el-table-column prop="" label="优惠总金额" min-width="130px" />
      <el-table-column prop="" label="其它金额" min-width="130px" />
      <el-table-column prop="payAmt" label="实收金额" min-width="130px">
        <template #default="scope">
          <span class="color-FF6A00">{{ scope.row.payAmt }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="rserveCode" label="关联预订单号" min-width="210px" />
      <el-table-column prop="payType" label="支付方式" min-width="210px" />
      <!-- 暂无订台人参数 -->
      <el-table-column prop="" label="订台人" min-width="110px" />
      <el-table-column prop="PayStateName" label="状态" min-width="110px" />
      <el-table-column prop="memberMobile" label="客户电话" min-width="170px" /> 

      <el-table-column prop="" label="操作" min-width="240px" fixed="right">
        <template #default="scope">
          <el-button class="action-btn" @click="handlePreDetail(scope.row)"> 查看明细</el-button>
          <el-button v-if="scope.row.payState === '2'" class="action-btn" @click="handleRreOrderCancel(scope.row)">取消预点</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>


</div>

<!-- 外卖订单 -->
<div class="book-main" v-show="consultActive === '外卖订单'">
  <el-form class="search-form" label-width="auto" :model="searchFormtake">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="订单号:">
          <el-input v-model="searchFormtake.orderBatchCode" placeholder="台单号/订单号/结账单" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="支付方式">
          <el-select v-model="searchFormtake.payType" filterable clearable>
            <el-option v-for="item in payType_options" :key="item.payCode" :value="item.payCode" :label="item.payName" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="订单状态">
          <el-select v-model="searchFormtake.status" filterable clearable>
            <el-option v-for="item in orderStatusList" :key="item.code" :value="item.code"
            :label="item.name" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户电话:">
          <el-input v-model="searchFormtake.mobile" placeholder="台单号/订单号/结账单" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="配送方式">
          <el-select v-model="searchFormtake.logistic" filterable clearable>
            <el-option v-for="item in DeliveryUnitList" :key="item.code" :value="item.code"
              :label="item.name" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="选择时间:">
          <el-date-picker popper-class="date-style" v-model="searchFormtake.operDate" type="daterange" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="9">
       
      </el-col>
      <el-col class="action-btn-box" :span="3">
        <el-button type="primary" @click="handleSearchtake">查询</el-button>
        <el-button class="reset-btn" @click="handleResettake">清空筛选</el-button>
      </el-col>
    </el-row>
  </el-form>
  <div class="table-box">
    <div class="total-box">
      <div>接单总金额：<span class="color-FF6A00">{{ formatDecimal(headData.totalAmt) }}</span></div>
      <div>实收金额：<span class="color-FF6A00">{{ formatDecimal(headData.payAmt) }}</span></div>
      <div>快递费：<span class="color-FF6A00">{{ formatDecimal(headData.deliveryAmount) }}</span></div>
      <div>优惠总金额：<span class="color-FF6A00">{{ formatDecimal(headData.Coupon) }}</span></div>
      <div>接单单数：<span class="color-FF6A00">{{ total }}</span></div>
    </div>
    <el-table :data="tableData" stripe v-loading="loading">
      <el-table-column prop="orderBatchCode" label="订单号" :min-width="tableColumnaction" />
      <el-table-column prop="orderTime" label="下单时间" :min-width="tableColumnaction" >
        <!--  -->
        <template #default="scope">
          <span>{{dayjs(scope.row.orderTime).format('YYYY-MM-DD HH:mm:ss')  }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalAmt" label="订单总金额" :min-width="tableColumnaction"  />
      <el-table-column prop="Coupon" label="优惠总金额" :min-width="tableColumnaction"  />
      <el-table-column prop="disAmt" label="其他金额" min-width="110px" />
      <el-table-column prop="payAmt" label="实收金额" min-width="110px" />
      <el-table-column prop="payName" label="支付方式" min-width="130px" />
      <el-table-column prop="logisticName" label="配送方式" min-width="130px" />
      <el-table-column prop="deliveryAmount" label="配送费" min-width="130px" />
      <el-table-column prop="Status" label="订单状态" min-width="130px">
        <template #default="scope">
          <span class="color-FF6A00">{{ scope.row.realAmt }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="memberName" label="客户昵称" :min-width="tableColumnaction" />
      <el-table-column prop="Mobile" label="客户电话" :min-width="tableColumnaction" />
      <el-table-column prop="" label="操作" min-width="120px" fixed="right">
        <template #default="scope">
          <el-button class="action-btn" @click="handleTakeDetail(scope.row.orderBatchCode)"> 查看明细</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div> 

  <div class="orderRecords-container-footer" v-if="consultList.length > 0">
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,sizes, jumper" :total="total"></el-pagination>
    <button class="footer-button">确定</button>
  </div>
  <!-- <div class="pagination-box">
    <el-pagination background layout="prev, pager, next,sizes, jumper, total" :total="total" :current-page="currentPage"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:10px" />
  </div> -->
  <!-- 取消预点单 原因 弹窗 -->
  <Cancel ref="blackRef" v-if="cancelVisible" :visible="cancelVisible" :rserveCode="rserveCode" @emitCancel="emitCancel" @emitSubmit="emitSubmit" />
  <!-- 预点单详情 -->
  <PreOrderTable ref="preOrderTableRef" v-model="preOrderTableShow" @cancel="preOrderTableShow = false"/>
  <AllTableSelect v-if="allTableSelectShow" v-model="allTableSelectShow" @cancel="allTableSelectShow = false" :areaCode="roomAreaCode" @confirm="selectTable" />
  <PayDialog ref="PayRef" v-if="PayVisible" :visible="PayVisible" @emitCancel="emitPayCancel" @emitSubmit="emitPaySubmit" />
  <!-- 外卖详情弹窗 -->
  <taskCancel ref="taskRef" v-if="taskVisible" :taskId="taskId" :visible="taskVisible"  @emitCancel="emitTaskCancel" @emitClose="emitTaskClose" @emitSubmit="emitTaskSubmit" />
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import Cancel from '../components/cancel.vue'
import taskCancel from '../components/taskCancel.vue'
import PreOrderTable from '@/views/components/PreOrderTable.vue'
import AllTableSelect from '@/views/components/AllTableSelect.vue'
import { formatDecimal } from '@/utils/chenhao'
import PayDialog from '@/views/workbench/onorder/payDialog.vue'
import { ElNotification } from 'element-plus'
import Api from '@/api'
import ls from '@/lib/ls'
import { transformWorkTime } from '@/utils/chenhao.js' 
import useConfigStore from '@/store/config'  
const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime  
const router = useRouter()

const tableColumnaction= ref('230')
window.addEventListener("resize",readerSize)
function readerSize (){
    if(window.innerWidth >= 1200){
         tableColumnaction.value = '260'
    }else if(window.innerWidth >= 800 && window.innerWidth < 1200){
        tableColumnaction.value = '160'
    }else if(window.innerWidth >= 400 && window.innerWidth < 800){
         tableColumnaction.value = '140'
    } 
}

// --------------------------------------------------------------- 头部配置 ---------------------------------------------------------------------
let searchFormPre = ref({})
const roomAreaCode = ref('') // 区域编号
const showTables = ()=>{
  if(consultActive.value == '消费订单'){
    roomAreaCode.value = searchForm.value.roomAreaCode
  }else if (consultActive.value == '预点订单'){
    roomAreaCode.value = searchFormPre.value.roomAreaCode
  }
  allTableSelectShow.value = true
} 

const consultActive = ref('')
const consultList = ref([
  // {
  //   name: '消费订单'
  // },
  // {
  //   name: '预点订单' 
  // }
])

const timeType = ref('0')

const onChangeTab = (name) => {
  if(consultActive.value === name){
    return
  }
  currentPage.value = 1;
  consultActive.value = name
  if(name === '消费订单'){
    getTableData()
  }
  if(name === '预点订单'){
    getTableDataPre()
  } 
  if(name === '外卖订单'){
    handleSearchtake()
    GetTakeOutOfDeliveryUnit()
    GetTakeOutOfDeliveryState()
  } 
} 

// 点击选择桌台
const allTableSelectShow = ref(false)
// 选中桌台
const selectTable = (data) => {
  if (data.name) {
    console.log(data);
    searchForm.value.roomCode = data.code
    searchForm.value.roomName = data.name

    searchFormPre.value.roomCode = data.code
    searchFormPre.value.roomName = data.name

    allTableSelectShow.value = false
  } else {
    ElNotification({
      title: '提示',
      message: '请选择桌号',
      type: 'warning',
    })
  }

}
// 获取区域OPTIONS
let area_options = ref([])
const get_area_options = (params) => {
  Api.Common.PcObjProcess.Do({ "functionName": "getRoomArea", "orgCode": "0004", "contentData": "" }).then(res => {
    console.log('获取区域OPTIONS res :>> ', res,);
    area_options.value = res.result
  })
}
get_area_options()

// 获取桌台状态OPTIONS
let tableType_options = ref([])
const get_tableType_options = (params) => {
  // 0：开台1：点单2：消费中3：已结账
  tableType_options = [
    { code: 0, name: '未点单' },
    { code: 1, name: '未结清' },
    { code: 2, name: '已结清' },
    { code: 3, name: '已清台' },
  ]
}
get_tableType_options()

// 获取服务员OPTIONS
let waiter_options = ref([])
const get_waiter_options = (params) => {
  Api.Common.PcObjProcess.Do({ "functionName": "getWaiterList", "orgCode": "0004", "contentData": { parentCode: '571' } }).then(res => {
    console.log('获取服务员OPTIONS res :>> ', res,);
    waiter_options.value = res.result
  })
}
get_waiter_options()

// 获取支付方式OPTIONS
let payType_options = ref([])
const get_payType_options = (params) => {
  Api.Common.PcObjProcess.Do({ "functionName": "getPayType", "orgCode": "0004", "contentData": { parentCode: '571' } }).then(res => {
    console.log('获取支付方式OPTIONS res :>> ', res,);
    payType_options.value = res.result
  })
}
get_payType_options()


let loading = ref(false)
let searchForm = ref({})
// 搜索
const handleSearch = (params) => {
  currentPage.value = 1;
  getTableData();
}
// 重置
const handleReset = (params) => {
  currentPage.value = 1;
  searchForm.value = {}
  handleSearch()
}
// 查询表格数据
let headData = ref({})
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)

// 修改分页一页多少条 (通用分页)
const handleSizeChange = (val) => {
  console.log('handleSizeChange...')
  currentPage.value = 1
  pageSize.value = val
  if(consultActive.value === '消费订单'){
    getTableData()
  }
  if(consultActive.value === '预点订单'){
    getTableDataPre()
  } 
  console.log('handleSizeChange...')
  
}
// 修改分页第几页 (通用分页)
const handleCurrentChange = (val) => {
  currentPage.value = val
  if(consultActive.value === '消费订单'){
    getTableData()
  }
  if(consultActive.value === '预点订单'){
    getTableDataPre()
  }   
}

const getTableData = (user) => {
  let query = {
    ...searchForm.value,
    pageIndex: currentPage.value,
    pageSize: pageSize.value
  }
  if (query.operDate && query.operDate.length > 1) {
    let startDate = query.operDate[0].split(' ')[0]; // 提取第一个元素的日期部分
    let endDate = query.operDate[1].split(' ')[0];   // 提取第二个元素的日期部分
    if(startDate == endDate){ // 如果日期相同 加一天  如26-26 变成26-27
      const date = new Date(endDate);
      date.setDate(date.getDate() + 1);
      const newDate = date.toISOString().split('T')[0]; 
      endDate = newDate
    }
    if(timeType.value == '0'){
      const fullStartDateTime = `${startDate} ${orgStartTime}`;
      const fullEndDateTime = `${endDate} ${orgEndTime}`;
      query.operDate = [fullStartDateTime,fullEndDateTime]
    }else if(timeType.value == '1'){{
      const fullStartDateTime = `${startDate} ${'00:00:00'}`;
      const fullEndDateTime = `${endDate} ${'00:00:00'}`;
      query.operDate = [fullStartDateTime,fullEndDateTime]
    }}

    query.beginTime = query.operDate[0]
    query.endTime = query.operDate[1] 
  }
  console.log('查询前的query :>> ', query,);
  loading.value = true
  // return
  Api.Common.PcObjProcess.Do({ "functionName": "GetOrderList", "orgCode": "0004", "contentData": query }).then(res => {
    console.log('查询订单table res :>> ', res,);
    loading.value = false
    tableData.value = res.data.listData
    total.value = res.totalCount
    headData.value = res.data.headData
  })
}  

// 点击网上支付查询
const handleSearchPay = (params) => {
  router.push({
    path: '/onorder/pay'
  })
}

// 点击查看明细
const handleDetail = (item) => {
  if (item.roomState == '已清台') {
    ls.set('TABLE_BTN', 1)
  } else {
    ls.remove('TABLE_BTN')
  }
  ls.set('TABLE_INFO', item)
  router.push({
    path: '/order/orderTable',
    query:{path:'onorder'}
  })
}

// 点击复台
const handleRe = (item) => {
  // console.log(item);
  // return
  ls.set('TABLE_INFO', item)
  router.push({
    path: '/order/clearRecords',
    query: {
    startTime: item.startTime,
    endTime: item.endTime
  }
  })
}

// 点击网上支付查询
let PayVisible = ref(false)
const PayRef = ref()
const handlePay = (name) => {
  PayVisible.value = true 
}
// 取消表格弹窗
const emitPayCancel = (params) => {
  console.log(params)
  PayVisible.value = false
}
// 提交表格弹窗
const emitPaySubmit = (params) => {
  console.log(params)
  PayVisible.value = false
}

//  --------------------------------------------------------------- 预点定订单 --------------------------------------------------------------------- 


// 搜索
const handleSearchPre = (params) => {
  currentPage.value = 1;
  getTableDataPre();
} 
// 重置
const handleResetPre = (params) => {
  currentPage.value = 1;
  searchFormPre.value = {}
  handleSearchPre()
}

const preOrderTableShow = ref(false)
const preOrderTableRef = ref()
// 点击查看明细
const handlePreDetail = (item) => {
  nextTick(() => { 
    preOrderTableRef.value.initData(item)
    preOrderTableShow.value = true 
  });  
} 

// 预点订单列表查询 - 替换接口下
const getTableDataPre = () => {
  console.log('查询前的query :>> ', searchFormPre.value);
  let query = {
    ...searchFormPre.value,
    pageIndex: currentPage.value,
    pageSize: pageSize.value
  }
  if (query.operDate && query.operDate.length > 1) { 
    let startDate = query.operDate[0].split(' ')[0]; // 提取第一个元素的日期部分
    let endDate = query.operDate[1].split(' ')[0];   // 提取第二个元素的日期部分
    if(startDate == endDate){ // 如果日期相同 加一天  如26-26 变成26-27
      const date = new Date(endDate);
      date.setDate(date.getDate() + 1);
      const newDate = date.toISOString().split('T')[0]; 
      endDate = newDate
    }
    if(timeType.value == '0'){
      const fullStartDateTime = `${startDate} ${orgStartTime}`;
      const fullEndDateTime = `${endDate} ${orgEndTime}`;
      query.operDate = [fullStartDateTime,fullEndDateTime]
    }else if(timeType.value == '1'){{
      const fullStartDateTime = `${startDate} ${'00:00:00'}`;
      const fullEndDateTime = `${endDate} ${'00:00:00'}`;
      query.operDate = [fullStartDateTime,fullEndDateTime]
    }}


    query.consumeDate_Start = query.operDate[0]
    query.consumeDate_End = query.operDate[1]
  } 
  loading.value = true  
  Api.Common.PcObjProcess.Do({ "functionName": "MemberOrderSearchBefore","contentData": query }).then(res => {
    console.log('预点订查询yudian订单table res :>> ', res,);
    loading.value = false
    tableData.value = res.listData
    total.value = res.totalCount  // 临时调试
    headData.value = res.headData 
  }) 
}

// 取消预点
const rserveCode = ref('')
const cancelVisible = ref(false) 
const handleRreOrderCancel = (item) => {  
  rserveCode.value = item.rserveCode // consumeCode rserveCode 
  cancelVisible.value = true
    // ElMessageBox.confirm('是否确定取消预点？', '提示',  { confirmButtonText: '是', cancelButtonText: '否',  type: 'warning' } ).then(() => {
    //   console.log('开始预点...等接口')
    //     // const { row } = item; 
    //     // let data = {
    //     //     itemCode: row.itemCode,
    //     // } 
    //     // Api.Common.PcObjProcess.Do({ "functionName": "MountRefund", "contentData": data }).then(res => {
    //     //     console.log('点击撤销支付 res:>> ', res);
    //     //     getTableData()
    //     // })
    // }).catch(() => {
    //   console.log('取消预点')
    // }) 
}

// 取消弹窗
const emitCancel = (params) => {
  console.log('emitCancel:',params)
  cancelVisible.value = false
}
// 提交弹窗
const emitSubmit = (params) => {
  console.log('emitSubmit:',params)
  cancelVisible.value = false
  getTableDataPre()
}

//--------------------------------------------------------------- 外卖 ---------------------------------------------------------------------
const taskVisible = ref(false) //外卖详情弹窗
const searchFormtake = ref({})
const taskId = ref(null) 
const DeliveryUnitList = ref([])
const orderStatusList = ref([])
// 搜索
const handleSearchtake = (params) => {
  currentPage.value = 1;
  console.log(searchFormtake.value,'searchFormtake.value')
  getTabletakeout();
} 
// 重置
const handleResettake = (params) => {
  currentPage.value = 1;
  searchFormtake.value = {}
  getTabletakeout()
}

//外卖详情
const handleTakeDetail = (id)=> {
  taskId.value = id
  taskVisible.value = true
}


const emitTaskCancel =()=> {
  // taskVisible.value = false
    console.log('取消订单')
} 
const emitTaskSubmit =()=> {
  // taskVisible.value = false
  console.log('补打配送单')
}
const emitTaskClose =()=> {
  taskVisible.value = false
}

//获取列表数据
const getTabletakeout = () => {
  let query = {
    ...searchFormtake.value,
    pageIndex: currentPage.value,
    pageSize: pageSize.value
  }

  loading.value = true  
  Api.Common.PcObjProcess.Do({ "functionName": "GetTakeOutList","contentData": query }).then(res => {
    console.log('外卖订查询订单table res :>> ', res,);
    loading.value = false
    tableData.value = res.mainData
    total.value = res.totalCount  // 临时调试
    headData.value = res.resultData[0]
  }) 
}

//获取配送方式
const GetTakeOutOfDeliveryUnit = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetTakeOutOfDeliveryUnit","contentData": ""}).then(res => {
    DeliveryUnitList.value = res.result
  }) 
}


//获取订单状态
const GetTakeOutOfDeliveryState = () => {
  Api.Common.PcObjProcess.Do({ "functionName": "GetTakeOutOfDeliveryState","contentData": ""}).then(res => {
    orderStatusList.value = res.result
  }) 
}



//  --------------------------------------------------------------- 初始化 ---------------------------------------------------------------------
 

const initFilter = () => { 
  let localConsultList = [{
    title: '消费订单',
    name:'onorder-consume'
  },
  {
    title: '预点订单',
    name:'onorder-reserve' 
  },
  // {
  //   title: '外卖订单',
  //   name:'onorder-takeout' 
  // }
]   
  const roleAll = new Map(ls.get('USER_ROLE_ALL') .map(item => [item.name, item])); 
  consultList.value = localConsultList.filter(item => roleAll.has(item.name))  
  console.log(consultList.value,'consultList.value')
  if(consultList.value.length > 0){
    
    searchForm.value.operDate = transformWorkTime('今天', orgStartTime, orgEndTime) // 默认今天
    searchFormPre.value.operDate = transformWorkTime('今天', orgStartTime, orgEndTime) // 默认今天
    searchFormtake.value.operDate = transformWorkTime('今天', orgStartTime, orgEndTime) // 默认今天
    if(consultList.value[0].name === 'onorder-consume'){ 
      consultActive.value = '消费订单'
      handleSearch()
    } else if(consultList.value[2].name === 'onorder-takeout') {
    
      consultActive.value = '外卖订单'
      handleSearchtake()
    } else{ 
      consultActive.value = '预点订单'
      handleSearchPre()
    }  

    
  }else{
    ElNotification({
      title: '提示',
      message: '当前没有权限访问该页面，请联系管理员',
      type: 'warning',
    })
  }
}
onMounted(() => {
  initFilter()  
  // searchForm.value.operDate = transformWorkTime('今天', orgStartTime, orgEndTime) // 默认今天
  // searchFormPre.value.operDate = transformWorkTime('今天', orgStartTime, orgEndTime) // 默认今天
  // getTableData()
});

</script>


<style scoped lang="scss">
@import '@/styles/com_style_input.css';
/* 在这里编写组件的CSS样式 */
// .app-container {}

.search-form {
  width: 1520px;
  ::v-deep {
    .el-form-item__label {
      line-height: 48px;
    }

    .el-input__wrapper {
      // width: 200px;
      height: 40px;
      background: #FFFFFF;
      border-radius: 8px;
    }

    .el-select__wrapper {
      height: 40px;
      background: #FFFFFF;
      border-radius: 8px;
    }

    .el-checkbox {
      height: 40px;
    }

    .el-checkbox__inner {
      width: 20px;
      height: 20px;
      border: 2px solid #666666;
      border-radius: 4px;
      background: #F9F9F9;
    }

    .is-checked {
      .el-checkbox__label {
        color: #FF6A00;
      }

      .el-checkbox__inner {
        background: #F9F9F9;
      }

      .el-checkbox__inner {
        width: 20px;
        height: 20px;
        border: 2px solid #FF6A00;
        border-radius: 4px;
        // background: #FF6A00;
      }

      .el-checkbox__inner::after {
        border: 2px solid #FF6A00;
        border-left: 0;
        border-top: 0;
        left: 7px;
        top: 4px;
      }
    }
  }

  .action-btn-box {
    
    display: flex;
    justify-content: space-between;

    button {
      width: 120px;
      height: 50px;
      line-height: 50px;
      background: #FFE566;
      border-radius: 8px;
      border: 0;
      font-size: 16px;
      color: #212121;
    }

    .reset-btn {
      background: #E6E6E6;
      color: #666666;
    }
  }
}

.table-box {
  padding: 20px;
  background: #FFFFFF;
  border-radius: 8px;
  width: 1520px;
  min-height: 500px;
  .total-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 20px;
    color: #212121;
  }
  .el-table--fit {
        height: 400px;
  }
  ::v-deep {
    .el-table__inner-wrapper::before {
      height: 0px;
    }

    .el-table th {
      font-size: 13px;
      font-weight: 700;
    }

    .el-table .el-table__header th,
    .el-table .el-table__header tr,
    .el-table .el-table__header td {
      height: 48px;
      background: #F9F9F9;
    }
  }

  .action-btn {
    width: 66px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #FF6A00;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #FF6A00;
  }
}

.pagination-box {
  margin-top: 20px;

  ::v-deep {
    .number {
      background: #E6E6E6 !important;
      border-radius: 8px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
    }

    .number:hover {
      color: #FF6A00;
    }

    .is-active {
      background-color: #FF6A00 !important;
      border-radius: 8px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
    }

  }
}

.color-FF6A00 {
  color: #FF6A00;
}
.consult-container {
  white-space: nowrap;

.consult-tabs {
    display: flex; 
    margin-bottom: 20px;
    .consult-tab {
      width: 300px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      text-align: center;
      padding: 21px 0;
      margin-right: 40px;
      cursor: pointer;
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
      line-height: 18px;

      &.active {
        background: #ffd400;
        border: 1px solid #ffd400;
        color: #212121;
      }
    }
}
}

::v-deep .table-box .el-table .cell {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 0.07292rem;
    color: #666666;
    line-height: 0.07292rem;
}
.time-radio{
  margin-top: 7px;
  ::v-deep(.el-radio){
    height: 15px;
  }
}
::v-deep(.el-radio__input.is-checked .el-radio__inner) {
      border-color: #ff6a00;
      /* 选中状态边框颜色 */
      background-color: #ffffff;
      /* 选中状态背景颜色 */
    }

    ::v-deep(.el-radio__inner:after) {
      background-color: #ff6a00;
      width: 8px;
      height: 8px;
    }

    ::v-deep(.el-radio__label) {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #666666 !important;
      line-height: 16px;
    }

</style>
